<template>
	
	<view class="owndrive">
		
		<!--搜索-->
		<view style="padding: 0;">
			<searchbar :placeholder="'请输入要搜索的线路名称'" @confirm="onSearchConfirm"></searchbar>
		</view>
		<!--列表-->
		<view class="content">
			<!--热门景区-->
			<view class="top-list">
				<block v-for="(item,index) in toplist" :key="index">
					<view class="list-info" @click='goScenicDetail(item.id,1)'>
						<view class="images">
							<image :src="item.listImage"></image>
						</view>
						<view class="desc">
							<view class="title">
								<text style="overflow:hidden;white-space:no-wrap;text-overflow:ellipsis;">{{item.title}}</text>
							</view>
							<view class="digest">
								<text style="">{{item.digest}}</text>
							</view>
						</view>
					</view>
				</block>
				<view class="br"></view>
			</view>
			<view style="margin-bottom:40upx;">
				<wxc-flex v-if = 'isNoMore && toplist.length > 0' dir='left' main='center' cross='center' style='width:100%;'>
						<vline color='#DDDDDD' width='120upx' height='1px'></vline>
						<text class='font-r' style='font-size:24upx;color:#464646;margin-left:26upx;margin-right:26upx;'>没有更多数据啦</text>
						<vline color='#DDDDDD' width='120upx' height='1px'></vline>
				</wxc-flex>
			</view>
			
			<view class="noTime" v-if="fleg"><image style="width: 100%;height: 100%;" src="../../static/img/shuju.png" ></image></view>
		</view>
	</view>
</template>
<style lang="scss" scoped>
		/*
	 	热门景区
	 	*/
	   .br{
	   	width: 100%;
	   	height: 1upx;
	   	background: #ECECEC;
	   	margin: 20upx 0;
	   }
	 .top-list{
	 	padding: 20upx 24upx;
	 	background: #fff;
	 }
	 .list-info{
	 	// margin-bottom: 20upx;
	 	border-radius: 12upx;
	 	.images{
	 		height: 350upx;
	 		image{
	 			border-radius: 12upx 12upx 0 0 ;
	 		}
	 	}
	 	.desc{
	 		padding: 25upx;
	 		background: #F6F6F6;
	 		border-radius:0 0  12upx 12upx ;
	 		.title{
	 			font-size: 42upx;
	 			font-weight: bold;
	 			overflow:hidden;
	 			white-space:nowrap;
	 			text-overflow: ellipsis;
	 		}
	 		.digest{
	 			font-size: 30upx;
	 			color: #AAAAAA;
	 			line-height: 54upx;
	 			overflow:hidden;
	 			white-space:nowrap;
	 			text-overflow: ellipsis;
	 		}	
	 	}
	 }
	 .owndrive{
	 	min-height: 100%;
	 	font-size: 32upx;
	 	// background: #f7f7f7;
	 	image{
	 		width: 100%;
	 		height: 100%;
	 	}
	 }

</style>
<script>
	import searchbar from "@/components/search-bar"
	import wxcFlex from "@/components/custom/flex.vue"
	import popupLayer from '@/components/popup-layer/popup-layer.vue';
	import vline from "@/components/custom/vline.vue"
	import wxcElip from "@/components/custom/wxc-elip.vue"
	import hldLabel from "@/components/custom/hld-label.vue"
	import cityList from "@/components/custom/city-list.vue"
	import hldPrice from "@/components/custom/hld-price.vue"
	import Header from "@/components/header.vue"
	var tempKeyword = ''; //用于触底刷新
	var keyword = "";
	var currentPage = 1;
	export default {
		components: {
			searchbar,
			wxcFlex,
			popupLayer,
			vline,
			wxcElip,
			hldLabel,
			cityList,
			hldPrice,
			Header
		},
		data() {
			return {
				fleg:false,
				comment:0,
				toplist:[],
				isEmpty: false,
				isNoMore: false
			}
		},
		onLoad: function(options) {
			currentPage = 1
			var that = this;
			var lineType = options.lineType;
			this.getList(lineType)
		},
		onShow() {
			//#ifdef H5
			document.title = '线路'
			//#endif
		},
		onReachBottom: function() {
			// if (!this.isNoMore) {
			// 	this.getNewScenceList();
			// }
		},
		computed: {

		},
		methods: {
			onSearchConfirm:function(e){
				console.log(e)
				keyword = tempKeyword;
				currentPage = 1;
				this.isNoMore = false;
				// this.getHotelList();
				this.getList('',e.detail.value);
			},
			getList(lineType,title){
				var params = {
					pageIndex:currentPage,
					pageSize:'10',
					channelType:'1',
					lineType: '自驾游',
					title: title ? title : ""
				}
				this.$postApi(this.$path.GET_LINEROAD_LIST,params).then(res => {
					console.log("线路列表返回数据------------->",res.data);
					// featureTip:[],
					if(res.data.success){
						this.fleg = false
						let list = res.data.data.list;
						let data = res.data.data
						list.forEach(item => {
							item.listImage = this.pub.delLastf(item.listImage);
							item.featureTip = item.featureTip ? item.featureTip.toString().split(';') : ''
							if(item.featureTip){
								item.featureTip.pop()
							}
						})
						if (currentPage == 1) {
						  var content = data.list
						} else {
						  var content = this.toplist.concat(data.list)
						  console.log("contnet", content)
						}
						var isNoMore = false;
						var isEmpty = false;
						if (content.length == 0) {
						  isEmpty = true;
						  isNoMore = false;
						} else if (!data.hasNextPage) {
						  //已经无再多数据
						  isNoMore = true;
						  isEmpty = false;
						}
						currentPage++;
						 this.toplist = content
						 this.isNoMore = isNoMore
						 this.isEmpty = isEmpty
						
						// this.lineRoad_list = list;
						console.log("this.scenic_list----------------->",this.toplist);
					}else{
						this.fleg = true
						this.toplist = [];
					}
				})
			},
			
			goScenicDetail(id){
				uni.navigateTo({
					url: '/pages/lineroad/lineroaddetail?id=' + id,
					animationType: "pop-in",
					animationDuration: 200
				})
			},
			
		}
	}
</script>


